<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content='ie=edge'>
  <title>siteadmin.taobao.com</title>
  <link href="./css/reset.css"  rel="stylesheet" type="text/css" />
  <link href="./css/border.css"  rel="stylesheet" type="text/css" />
  <link href="./css/index.css"  rel="stylesheet" type="text/css" />
  <link href="./css/builder.css"  rel="stylesheet" type="text/css" />
  <link href="./layui/css/layui.css"  rel="stylesheet" type="text/css" />
  <link href="./css/swiper.min.css"  rel="stylesheet" type="text/css" />
  <script src='./js/builderSwiper.js'></script>
  <script src='./layui/layui.js'></script>
  <script src='./js/jquery.min.js'></script>
  <script src='./js/ddsort.js'></script>
  <script src='./js/mixin.js'></script>
  <script src='./js/swiper.min.js'></script>
</head>
<body>
  <div class='admin-bg'>
    <header class='admin-header'>
      <img src='./css/images/logo.png' alt='' />
    </header>
    <article class='admin-content'>
      <section class='a-c-left'>
        <div class='a-c-l-menu'>
          <div class='aclm-item aclm-active' id='aclm1' onclick='switchEditor("acle1", event)'>
            <p><i class="layui-icon">&#xe653;</i></p>
            <p>模块</p>
          </div>
          <div class='aclm-item' id='aclm2' onclick='switchEditor("acle2", event)'>
            <p><i class="layui-icon">&#xe66a;</i></p>
            <p>配色</p>
          </div>
          <div class='aclm-item' id='aclm3' onclick='switchEditor("acle3", event)'>
            <p><i class="layui-icon">&#xe621;</i></p>
            <p>页头</p>
          </div>
          <div class='aclm-item' id='aclm4' onclick='switchEditor("acle4", event)'>
            <p><i class="layui-icon">&#xe655;</i></p>
            <p>页面</p>
          </div>
          <div class='aclm-item' id='aclm5' onclick='switchEditor("acle5", event)'>
            <p><i class="layui-icon">&#xe64e;</i></p>
            <p>CSS</p>
          </div>
        </div>
        <div class='a-c-l-editor'>
          <div id='acle1' class='acleItem'>
            <div class='a-c-l-baseComp'>
              <header class='aclb-header'>基础模块</header>
              <div class='aclb-container'>
                <ul id='left'>
                  <li class='builder-li' draggable="true">
                    <div class='web-component'>
                      <span class='builder-btn-edit' onclick='openEdit("title")'>
                        <i class="layui-icon layui-icon-edit"></i>
                        编辑
                      </span>
                      <dialog class='builder-editWindow'>
                        <div class='b-s-title'>
                          宝贝推荐
                          <i class="layui-icon layui-icon-close b-s-close"  onclick='closeEdit(event)'></i>
                        </div>
                        
                      </dialog>
                      <span class='builder-btn-del' onclick='comDel(event)'>
                        <i class="layui-icon layui-icon-close"></i>
                        删除
                      </span>
                      <div
                        class='builder-title'
                        style='box-sizing: border-box; width: 100%; height: 1.04rem; line-height: 1.04rem; background: rgba(150,150,150,1); padding: 0 0.4rem;'
                      >标题行</div>
                    </div>
                    <p>标题行</p>
                  </li>
                  <li class='builder-li' draggable="true">
                    <div class='web-component cm6'>
                      <span class='builder-btn-del' onclick='comDel(event)'>
                        <i class="layui-icon layui-icon-close"></i>
                        删除
                      </span>

                    </div>
                    <p>轮播图</p>
                  </li>
                  <li class='builder-li' draggable="true">
                    <div class='web-component'>
                      <span class='builder-btn-edit' onclick='openEdit("info")'>
                        <i class="layui-icon layui-icon-edit"></i>
                        编辑
                      </span>
                      <span class='builder-btn-del' onclick='comDel(event)'>
                        <i class="layui-icon layui-icon-close"></i>
                        删除
                      </span>
                      <div
                        class='builder-info'
                        style='position: relative; box-sizing: border-box; width: 100%; height: auto; padding: 0.2rem 0.4rem; background: rgba(250,250,250,1); border: 0.04rem solid rgba(233,205,208,1)'
                      >
                        <header class='b-i-title'>尊敬的顾客您好！您所查询的<span class='b-i-t-id'>案例1</span>，请放心使用。该产品于<span class='b-i-t-time'>2019-05-05 17:27</span>被查询。该产品共被查询<span class='b-i-t-times'>n</span>次。</header>
                        <div
                          class='b-i-content'
                          style='border: 0.04rem solid rgba(233,205,208,1); border-radius: 0.1rem; padding: 0.2rem 0.6rem; margin: 0.2rem 0;'
                        >
                          <div
                            class='b-i-c-item'
                            style='box-sizing:border-box; width: 48%; display: inline-block;'
                          >
                            <input
                              class='bici-key'
                              type='text'
                              value='品牌授权'
                              style='width: 1.4rem; background: rgba(0,0,0,0);'
                              onkeyup='changeValue(event)'
                            />:&nbsp;&nbsp;&nbsp;&nbsp;
                            <span
                              class='bici-value'
                              style='display:inline-block; width: 2.4rem; margin-top: -0.02rem; vertical-align: text-top;'
                            >品牌商名称品牌商名称..</span>
                          </div>
                          <div
                            class='b-i-c-item'
                            style='box-sizing:border-box; width: 48%; display: inline-block;'
                          >
                            <input
                              class='bici-key'
                              type='text'
                              value='生产销售'
                              style='width: 1.4rem; background: rgba(0,0,0,0);'
                              
                            />:&nbsp;&nbsp;&nbsp;&nbsp;
                            <span
                              class='bici-value'
                              style='display:inline-block; width: 2.4rem; margin-top: -0.02rem; vertical-align: text-top;'
                            >生产商名称生产商名称..</span>
                          </div>
                          <div
                            class='b-i-c-item'
                            style='box-sizing:border-box; width: 48%; display: inline-block;'
                          >
                            <input
                              class='bici-key'
                              type='text'
                              value='生产销售'
                              style='width: 1.4rem; background: rgba(0,0,0,0);'
                            />:&nbsp;&nbsp;&nbsp;&nbsp;
                            <span
                              class='bici-value'
                              style='display:inline-block; width: 2.4rem; margin-top: 0.02rem; vertical-align: text-top;'
                            >201905001</span>
                          </div>
                        </div>
                        <button
                          class='b-i-btn'
                          style='width: 2rem;height: 0.6rem; line-height: 0.6rem; border: 0.01rem solid #eee; border-radius: 0.1rem; margin-left: calc(50% - 1rem);'
                        >
                          <i class="layui-icon">&#xe619;</i>
                          收起
                        </button>
                      </div>
                    </div>
                    
                    <p>产品信息</p>  
                  </li>
                  <li class='builder-li' draggable="true">
                    <div class='web-component'>
                      <img src='./css/images/swiperdemo3.png' alt='' />
                    </div>
                    <p>封面图</p>
                  </li>
                  <li class='builder-li' draggable="true">
                    <div class='web-component'>
                      <span class='builder-btn-edit' onclick='openEdit("custom")'>
                        <i class="layui-icon layui-icon-edit"></i>
                        编辑
                      </span>
                      <span class='builder-btn-del' onclick='comDel(event)'>
                        <i class="layui-icon layui-icon-close"></i>
                        删除
                      </span>
                      <div
                        class='builder-custom'
                        style='box-sizing: border-box; width: 100%; height: 1.04rem; line-height: 1.04rem; background: rgba(150,150,150,1); padding: 0 0.4rem;'
                      >自定义</div>
                    </div>
                    <p>自定义</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
      </section>
      <section class='a-c-right'>
        <div class='a-c-r-header'>
          <button class='acrh-btnFinal' onclick='webUpload()'>发布站点</button>
        </div>
        <div id='webPage'>
          <div class='a-c-r-webHeader'>
            <div class='a-c-r-webpage'>
              <!-- <div class='builder-image'>header-picture</div>
              <div class='builder-menu'>header-menu</div> -->
              <div class='webHeader-mark'>以上为页头区域</div>
            </div>
          </div>
          <div class='a-c-r-webBody'>
            <div class='wrap'>
              <ul id='right'>
              </ul>
            </div>
          </div>
          <div class='a-c-r-webFooter'>
            <div class='webHeader-mark'>以下为页尾区域</div>
          </div>
        </div>
        <!-- -------------------------------------------模板编辑区----------------------------------------------- -->
        <div class='a-c-r-comEdit'>
          <div class='acrc-b-info acrc-item'>
            <div class='acrc-b-i-content'></div>
            <button class='acrc-b-i-btn' onclick='confirmEdit()'>确定</button>
            <button class='acrc-b-i-btn' onclick='cancelEdit()'>取消</button>

            <div class='acrc-b-i-zoneSize'>
              <span>字体大小</span>
              :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span class='acrc-bi-z-control' onclick='info_valCalc(-1)'>-</span>
              <span id='acrc-bi-z-value'>14</span>
              <span class='acrc-bi-z-control' onclick='info_valCalc(1)'>+</span>
              <div id='colorBoard-bg'></div>
              <div id='colorBoard-font'></div>
              <div id='colorBoard-line'></div>
            </div>
          </div>
          <div class='acrc-b-title acrc-item'>
            <div class='acrc-b-t-zoneSize'>
              <textarea class='acrc-bt-z-textarea' onkeyup='title_textchg(event)'>标题行</textarea>
              <span>字体大小</span>
              :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span class='acrc-bt-z-control' onclick='title_valCalc(-1)'>-</span>
              <span id='acrc-bt-z-value'>14</span>
              <span class='acrc-bt-z-control' onclick='title_valCalc(1)'>+</span>
              <div id='title-colorBoard-bg'></div>
              <div id='title-colorBoard-font'></div>

              <p>
                <input
                  class='acrc-bt-z-checkbox'
                  type='checkbox'
                  checked
                  onclick='title_align(0)'
                />文字靠左
              </p>
              <p>
                <input
                  class='acrc-bt-z-checkbox'
                  type='checkbox'
                  onclick='title_align(1)'
                />文字居中
              </p>
              <p>
                <input
                  class='acrc-bt-z-checkbox'
                  type='checkbox'
                  onclick='title_align(2)'
                />文字靠右
              </p>
            </div>
          </div>
          <div class='acrc-b-custom acrc-item'>
            <div class='acrc-b-c-zoneSize'>
              <textarea class='acrc-bt-z-textarea' onkeyup='custom_textchg(event)'>自定义</textarea>
              <span>字体大小</span>
              :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span class='acrc-bc-z-control' onclick='custom_valCalc(-1)'>-</span>
              <span id='acrc-bc-z-value'>14</span>
              <span class='acrc-bc-z-control' onclick='custom_valCalc(1)'>+</span>
              <div id='custom-colorBoard-bg'></div>
              <div id='custom-colorBoard-font'></div>

              <p>
                <input
                  class='acrc-bc-z-checkbox'
                  type='checkbox'
                  checked
                  onclick='custom_align(0)'
                />文字靠左
              </p>
              <p>
                <input
                  class='acrc-bc-z-checkbox'
                  type='checkbox'
                  onclick='custom_align(1)'
                />文字居中
              </p>
              <p>
                <input
                  class='acrc-bc-z-checkbox'
                  type='checkbox'
                  onclick='custom_align(2)'
                />文字靠右
              </p>
            </div>
          </div>
        </div>
        <!-- ------------------------------------------/模板编辑区----------------------------------------------- -->
      </section>
    </article>
    <footer></footer>
  </div>
  <script src='./js/cloneNode.js'></script>
  <script src='./js/layuiRender.js'></script>
  <script>
    $('.wrap').DDSort({
      target: 'li',
      delay: 100,
      floatStyle: {
        'border': '1px solid #ccc',
        'background-color': '#fff'
      }
    })
    
    function webUpload () {
      let webPage = document.getElementById('webPage')
      let $webPage = webPage.cloneNode(true)
      console.log($webPage)
      let a = new Object
      a.webkey = $webPage.innerHTML
      console.log(a)
      let webData = JSON.stringify(a)
      $.ajax({
        type: 'Post',
        url: './add.php',
        async: false,
        data: {
          'username': 'test',
          'password': webData
        },
        success: function (res) {
          alert(res)
        },
        error: function (err) {
          alert(err)
        }
      })
    }



  </script>
</body>
</html>